<template>
  <div style="display: none">
    <div id="printMe">
       
      <div style="display: flex; flex-direction: row; padding-left: 10px;padding-top: 15px; width: 100%;padding-right: 10px;"   v-for="item in multipleSelection"
        :key="item.washCode">
    
        <el-col :span="14"  >
         
          <el-row style="border-bottom:2px solid black ; height: 30px;width: 100%;">
             {{item.srgCode}}
          </el-row>
           <el-row style="border-bottom:2px solid black; font-size: 10px; width: 100%; height: 50px; display: flex; flex-direction: column; justify-content: space-around;" >
             <div style="white-space: nowrap;">水洗码:{{item.washCode.substring(0,13)}} 日期:{{customerDetail.date}}</div>
             <div style="white-space: nowrap;">  {{customerDetail.customName}} {{customerDetail.customPhone}}</div>
          </el-row>

          <el-row >
           <el-col :span="12"  style="border-right: 2px solid black;height: 75px; width:50%;" >
            <div  style="white-space: nowrap; font-size: 13px;font-weight: 700;">{{item.index}}件</div>

            <div   style="font-size: 10px;" v-if="item.remarks">{{(item.remarks.join(",")).substring(0,10)}}</div>

           </el-col>

            <el-col :span="10">
    

           </el-col>
            
          </el-row>
       
        </el-col>
  

        <el-col :span="10" style="display: flex; justify-content: center; align-items: center;align-content: space-around; flex-direction: column;position: relative;">
            <div v-if="item.complete" style="height: 30px;width: 30px; border-radius: 15px; border: 2px solid black; font-weight: 700; justify-content: center;align-items: center; font-size: 15px; position: absolute;display: flex;top: 0px;">{{item.complete}}</div>
            <QrcodeVue :value="item.washCode" :size="100" />
        </el-col>

      </div>
   
    </div>

    <button ref="printBtn" v-print="printObj"></button>
  </div>
</template>

<script>
// import BarCode from "./BarCode.vue";
import QrcodeVue from "qrcode.vue";
export default {
  name: "PrintWashCodeTwo",
  props: ["multipleSelection","customerDetail"],
  components: {
    // BarCode,
    QrcodeVue
  },
  data() {
    return {
      printObj: {
        id: "printMe",
        popTitle: "水洗码",
      },
      printTime: "",
    };
  },
};
</script>
